<template>
  <div class="app-container">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="title" label="档次名"></el-table-column>
      <el-table-column prop="price" label="充值金额"></el-table-column>
      <el-table-column prop="real_money" label="实得金额"></el-table-column>
      <el-table-column prop="store_name" label="门店" show-overflow-tooltip>
        <template slot-scope="scope">
          <span size="mini" v-for="(item,index) in scope.row.store_name" :key="index">{{scope.row.store_name.length==1?item.store_name:item.store_name+","}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="effective" label="有效期"></el-table-column> -->
      <el-table-column prop="enable" label="启用">
        <template slot-scope="scope" style="display:flex;align-items: center;">
          <!-- <img
            src="../../../assets/img/dui.png"
            v-if="scope.row.enable==1"
            style="width:14px;height:14px;margin-right:6px;"
            alt
          />
          <img
            src="../../../assets/img/error.png"
            v-else
            style="width:14px;height:14px;margin-right:6px;"
            alt
          /> -->
                     <el-switch
                  v-model="scope.row.check"
                  @change="stopuse(scope.row)"
                  active-color="#409EFF"
                  inactive-color="#DCDFE6"
                ></el-switch>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="show" label="显示">
        <template slot-scope="scope" style="display:flex;align-items: center;">
          <img
            src="../../../assets/img/dui.png"
            v-if="scope.row.show==1"
            style="width:14px;height:14px;margin-right:6px;"
            alt
          />
          <img src="../../../assets/img/error.png" v-else style="width:14px;height:14px;" alt />
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button
            @click.native.prevent="showdata(scope.$index, tableData)"
            v-if="scope.row.show==1&&sell_15"
            type="text"
          >隐藏</el-button>
          <el-button
            @click.native.prevent="showdata(scope.$index, tableData)"
            v-if="scope.row.show!=1&&sell_15"
            type="text"
          >显示</el-button> -->
          <!-- <el-button
            @click.native.prevent="stopuse(scope.row)"
            v-if="scope.row.enable==1&&sell_16"
            type="text"
          >停用</el-button>
          <el-button
            @click.native.prevent="stopuse(scope.row)"
            v-if="scope.row.enable!=1&&sell_16"
            type="text"
          >启用</el-button> -->
          <el-button @click.native.prevent="editdata(scope.row)" v-if="sell_17" type="text">编辑</el-button>
          <el-button
            @click.native.prevent="del(scope.row)"
            v-if="sell_18"
            type="text"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <div style="width:100%;text-align:center;margin:50px auto;">
        <el-pagination
          background
          :page-size="10"
          :page-sizes="[10, 20, 50, 100]"
          layout="total,prev, sizes, pager, next, jumper"
          :total="totle"
          @size-change="handleSizeChange"
          @current-change="fenyeBtn"
        ></el-pagination>
      </div>
    <el-dialog title="编辑充值档次" :visible.sync="gradeDialog" width="50%" @close="closeDialog()">
      <el-form
        ref="formInfo"
        :model="formInfo"
        class="demo-form-inline"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="档次名" prop="gradename">
          <el-input v-model="formInfo.gradename"></el-input>
        </el-form-item>
        <el-form-item label="充值金额" prop="price">
          <el-input v-model="formInfo.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实得金额" prop="real_money">
          <el-input v-model="formInfo.real_money">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="有效期" prop="effective">
          <el-input v-model="formInfo.effective">
            <template slot="append">月</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">若不设置，则对所有门店有效</div>
        </el-form-item> -->
        <el-form-item label="使用门店" prop="shop">
          <!-- <el-select v-model="formInfo.shop" disabled style="width:98%" placeholder="请选择门店">
            <el-option label="全部" value="1"></el-option>
          </el-select>-->
          <el-select
            v-model="formInfo.shop"
            placeholder="请选择"
            @change="$forceUpdate()"
            multiple
            style="width:50%"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.store_name"
              :value="item.id"
            ></el-option>
          </el-select>
          <div style="color:#AFAFAF;font-size:14px">若不设置，则对所有门店有效</div>
        </el-form-item>
        <!-- <el-form-item label="规则配置">
          <el-input value="1、购买当日生效" readonly></el-input>
        </el-form-item>
        <el-form-item>
          <el-input value="2、仅本人使用" readonly></el-input>
        </el-form-item>-->
        <el-form-item
          :label="index==0?'规则配置':''"
          v-for="(domain, index) in formInfo.domains"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
        >
          <el-input style="position:relative;" v-model="domain.value">
            <!-- <template slot="prepend">{{index+1+'、'}}</template> -->
          </el-input>
          <!-- <span class="solt">{{index+3+'、'}}</span> -->
          <div class="imgposi">
            <img
              class="delcont"
              src="../../../assets/img/delimg.png"
              @click.prevent="removeDomain(domain)"
              alt
            />
            <img
              class="addcont"
              src="../../../assets/img/addimg.png"
              @click.prevent="addDomain(formInfo.domains)"
              alt
            />
          </div>
        </el-form-item>
        <div style="color:#AFAFAF;font-size:14px;margin-left:100px;">最多添加6条</div>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm('formInfo')">重置</el-button>
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  rechargeindex,
  rechargeshow,
  rechargeenable,
  rechargesellEdit,
  rechargesellDelete,
  lists
} from "@/api/user";
import { getp_id } from "@/utils/getmenuid";
import { adminStore } from "@/api/menu";
import Base64 from "@/utils/base";
export default {
  data() {
    return {
      tableData: "",
      sell_15: false,
      sell_16: false,
      sell_17: false,
      sell_18: false,
      options: "",
      gradeDialog: false,
      formInfo: {
        gradename: "",
        shop: "1",
        price: "",
        real_money: "",
        domains: [
          {
            value: ""
          }
        ]
      },
      page:1,
      totle:10,
      num:10,
      rules: {
        gradename: [
          { required: true, message: "请输入档次名", trigger: "blur" }
        ],
        price: [
          { required: true, message: "请输入充值金额", trigger: "blur" }
        ],
        real_money: [
          { required: true, message: "请输入实得金额", trigger: "blur" }
        ],
        // effective: [
        //   { required: true, message: "请输入有效期", trigger: "blur" }
        // ]
      }
    };
  },
  created() {
    this.getlists();
    setTimeout(() => {
      this.gutrecharge();
    }, 500);
  },
  methods: {
    getlists() {
      lists({
        request_data: Base64.encode(JSON.stringify({ pid: getp_id() }))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        let btnarr = [];
        res.result.map(v => {
          btnarr.push(v.class_mark);
        });
        btnarr.forEach(item => {
          if (item == "sell_15") {
            this.sell_15 = true;
          }
          if (item == "sell_16") {
            this.sell_16 = true;
          }
          if (item == "sell_17") {
            this.sell_17 = true;
          }
          if (item == "sell_18") {
            this.sell_18 = true;
          }
        });
      });
    },
    // 保存操作
    submitForm(formName) {
      const that = this;
      let params = {
        id: that.formInfo.id,
        title: that.formInfo.gradename,
        price: that.formInfo.price,
        real_money: that.formInfo.real_money,
        effective: 0,
        store_id: that.formInfo.shop,
        rule_one: that.formInfo.domains[0]
          ? that.formInfo.domains[0].value
          : "",
        rule_two: that.formInfo.domains[1]
          ? that.formInfo.domains[1].value
          : "",
        rule_three: that.formInfo.domains[2]
          ? that.formInfo.domains[2].value
          : "",
        rule_four: that.formInfo.domains[3]
          ? that.formInfo.domains[3].value
          : "",
        rule_five: that.formInfo.domains[4]
          ? that.formInfo.domains[4].value
          : "",
        rule_sex: that.formInfo.domains[5] ? that.formInfo.domains[5].value : ""
      };
      that.$refs[formName].validate(valid => {
        if (valid) {
          // if (that.msg === 1) {
          rechargesellEdit({
            request_data: Base64.encode(JSON.stringify(params))
          }).then(res => {
            if(res.status==2){
          that.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            that.$message({
              message: res.message,
              type: "success"
            });
          that.closeDialog();
          that.gutrecharge();
          });
          // } else {
          // console.log("error")
          // }
          // that.reload()
          // 走保存请求
        } else {
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["formInfo"].resetFields();
      this.gradeDialog = false;
      this.$emit("closeDialog", flag);
    },
    removeDomain(item) {
      var index = this.formInfo.domains.indexOf(item);
      if (index !== -1) {
        this.formInfo.domains.splice(index, 1);
      }
    },
    addDomain(val) {
      if (val.length > 5) {
        return;
      }
      this.formInfo.domains.push({
        value: "",
        key: Date.now()
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //显示，隐藏
    showdata(index, data) {
      rechargeshow({
        request_data: Base64.encode(
          JSON.stringify({
            id: data[index].id,
            show: data[index].show == 1 ? 2 : 1
          })
        )
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.gutrecharge();
      });
    },
    //停用，启用
    stopuse(data) {
      rechargeenable({
        request_data: Base64.encode(
          JSON.stringify({
            id: data.id,
            enable: data.enable == 1 ? 2 : 1
          })
        )
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.gutrecharge();
      });
    },
    getadminStore(val) {
      adminStore({
        request_data: Base64.encode(JSON.stringify({ store_id: "" }))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
           let storeid = [];
      val.store_name.map(i => {
          storeid.push(i.id);
        })
        // this.storeid = storeid
        // console.log(this.storeid,storeid)
        this.formInfo.shop = storeid;
        // this.changestorespopup = true;
        this.gradeDialog = true;
        this.options = res.data;
      });
    },
    getshopInfo(e) {
      this.formInfo.shop = e;
    },
    //编辑
    editdata(val) {
      this.getadminStore(val);
      this.formInfo = {
        gradename: val.title,
        price: val.price,
        real_money: val.real_money,
        effective: 0,
        id: val.id,
        shop: val.store_id,
        domains: [
          {
            value: val.rule_one || ""
          },
          {
            value: val.rule_two || ""
          },
          {
            value: val.rule_three || ""
          },
          {
            value: val.rule_four || ""
          },
          {
            value: val.rule_five || ""
          },
          {
            value: val.rule_sex || ""
          }
        ]
      };
      //   rechargesellEdit({
      //   request_data: Base64.encode(JSON.stringify({id:data[index].id,enable:data[index].enable==1?2:1}))
      // }).then(res => {
      //   console.log(res)
      //   this.gutrecharge()
      // })
    },
    del(data) {
      this.$confirm("确定删除此条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          rechargesellDelete({
            request_data: Base64.encode(JSON.stringify({ id: data.id }))
          }).then(res => {
            if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.gutrecharge();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    handleSizeChange(val) {
      this.num = val
      this.gutrecharge(this.page,this.num);
    },
    fenyeBtn(e) {
      this.page = e;
      this.gutrecharge(this.page.this.num);
    },
    gutrecharge(page,num) {
      rechargeindex({
        request_data: Base64.encode(JSON.stringify({ page: page||this.page,limit:num||this.num }))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.tableData = res.result.data;
        this.totle = res.result.count
      });
    }
  }
};
</script>

<style scoped lang="scss">
.delcont {
  cursor: default;
  width: 20px;
  height: 20px;
}
.imgposi {
  height: 40px;
  position: absolute;
  display: flex;
  align-items: center;
  right: 10px;
  width: 60px;
  justify-content: space-between;
  top: 50%;
  transform: translateY(-50%);
}
.addcont {
  cursor: default;
  width: 20px;
  height: 20px;
}
</style>

